import { SafeAreaView, StyleSheet, Text, View, TouchableOpacity, StatusBar } from 'react-native'
import React, { useState } from 'react'
import { pTx } from "../../utils/dimensions"
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import Recommend from "./recommend"
import HotGroupList from "./hotGroupList"
import PostListByUserFollow from "./postListByUserFollow"
import NotOpen from "../notOpen"

const Community = (props) => {
    const [index, setIndex] = useState(0);
    const [routes] = useState([
        { key: 'recommend', title: '推荐' },
        { key: 'postListByUserFollow', title: '关注' },
        { key: 'hotGroupList', title: '社群' },
        { key: 'NotOpen2', title: '短剧' },
    ]);
    renderTabBar = (props) => {
        return (
            <View style={styles.tabBar}>
                {routes.map((route, i) => (
                    <TouchableOpacity onPress={() => setIndex(i)} key={route.key}>
                        <View
                            style={[
                                styles.tab,
                                index === i ? styles.activeTab : null,
                            ]}
                        >
                            <Text
                                style={
                                    [
                                        index === i
                                            ? styles.activeText
                                            : styles.inactiveText]
                                }
                            >
                                {route.title}
                            </Text>
                        </View>
                    </TouchableOpacity>
                ))}
            </View>
        );
    }
    const renderScene = SceneMap({
        recommend: Recommend,
        postListByUserFollow: PostListByUserFollow,
        hotGroupList: HotGroupList,
        NotOpen2: NotOpen,
    });
    return (
        <SafeAreaView style={styles.container}>
            <TabView
                renderTabBar={renderTabBar}
                navigationState={{ index, routes }}
                renderScene={renderScene}
                onIndexChange={setIndex}
            />
            <StatusBar backgroundColor="rgba(237, 237, 237, 1)" barStyle={"dark-content"} />
        </SafeAreaView>
    )
}
export default Community


const styles = StyleSheet.create({
    container: {
        position: "relative",
        flex: 1,
        backgroundColor: "#fff",
    },
    tabBar: {
        flexDirection: 'row',
        paddingHorizontal: pTx(15),
        paddingVertical: pTx(15),
    },

    tab: {
        marginRight: pTx(20),
    },
    activeTab: {
    },
    activeText: {
        fontSize: pTx(18),
        fontWeight: "bold",
        color: "#0A0C14",
        borderBottomWidth: pTx(2),
        borderBottomColor: "rgba(6, 193, 97, 1)"
    },
    inactiveText: {
        fontSize: pTx(16),
        color: "#0A0C14",
    },
})